<template>
  <van-tabbar v-model="active" route active-color="#d81e06" safe-area-inset-bottom v-if="showTabbar">
    <van-tabbar-item 
      v-for="item in tabbar" 
      :key="item.name"
      v-bind="item"
    >
      <span class="flex whitespace-pre text-[11px] mt-0.5" :class="active === item.name ? 'text-[#d81e06]' : 'text-[#777]'">
        {{ $t(item.label) }}
      </span>
      <template #icon="props">
        <img :src="props.active ? item.active : item.basic" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
<script setup lang="ts">
import { ref } from "vue"

import { useRoute } from "vue-router"

import activeHome from "@/assets/images/tabbar/tab_home_yes.png"
import activeWelfare from "@/assets/images/tabbar/tab_welfare_yes.png"
import activeCredit from "@/assets/images/tabbar/tab_credit_yes.png"
import activeUser from "@/assets/images/tabbar/tab_user_yes.png"

import home from "@/assets/images/tabbar/tab_home_no.png"
import welfare from "@/assets/images/tabbar/tab_welfare_no.png"
import credit from "@/assets/images/tabbar/tab_credit_no.png"
import user from "@/assets/images/tabbar/tab_user_no.png"

const active = ref<string>('home')

const route = useRoute()

const tabbarPath = ['/home', '/welfare', '/credit', '/user']

const showTabbar = computed(() => tabbarPath.includes(route.path))

const tabbar = [
  { 
    name: 'home', 
    replace: true, 
    to: '/home',
    label: 'tabbar.homeTitle',
    active: activeHome,
    basic: home
  },
  { 
    name: 'welfare', 
    replace: true, 
    to: '/welfare',
    label: 'tabbar.welfareTitle',
    active: activeWelfare,
    basic: welfare
  },
  { 
    name: 'credit', 
    replace: true, 
    to: '/credit',
    label: 'tabbar.creditTitle',
    active: activeCredit,
    basic: credit
  },
  { 
    name: 'user', 
    replace: true, 
    to: '/user',
    label: 'tabbar.userTitle',
    active: activeUser,
    basic: user
  }
]
</script>

<style lang="less" scoped></style>
